<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>订单信息</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<style type="text/css">
	
	</style>
	<script type="text/javascript">
		var appId = '${appId}';
		var mobile = '${mobile}';
		var ctxFront = "${ctxFront}";
		var ctxShop = "${ctxShop}";
		$(document).ready(function() {
			$("#listForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
		function toPay(){
			//验证是否登录
			if(!checkLogin()) return;
			
			//判断是否为支付宝支付
			if(${order.payType=="2"}){
				document.location="ievent://payOrderByAlipay?orderId=${order.id}";
			}else{
				loading('正在提交，请稍等...');
				setTimeout(function(){
					document.location="${ctxShop}/myorder/order/toPay?orderNo=${order.orderNo}&userId=${user.id}&appId="+appId;
				}, 2000);
			}
		}
	</script>
	<script type="text/javascript"> 
		$(document).ready(function() {
			//预加载图片
			startLoadImage();
		});
		function startLoadImage(){
			$(".displayImages").each(function(index){
				loadImage($(this).attr("id"),$(this).attr("path"),loadResult);
			});
		}
	</script>
	<script type="text/javascript"> 
		function iEventGetNavgitionInfo(){
			var result = {
				title:"订单信息",
			    leftBtn:{ 
			    	type:2,	//0只显示返回,1只显示关闭，2显示返回，关闭
					backFun:"iEventGoBack()"   //返回执行的事件，不带的话由iOS控制。
				},
				rightBtn:{
					bottons:[
						{
							type:1,			///0就是图片，1是文字,
							name:"联系客服",		//更多webNavMore.png 搜索webNavSearch.png
							fun:"iEventAppCustomService()"
						}
					]
				}               
			};
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function iEventGoBack(){
			document.location="${ctxShop }/myorder/list?userId=${user.id }&type=${type }";
		}
		function iEventAppCustomService(){
			document.location="ievent://appCustomService";
		}
	</script>
</head>
<body data-role="page">
	<div role="main" class="ui-content" style="padding:0px 1em 3em 1em;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<%@include file="/WEB-INF/views/mobile/layouts/checkLoginPopup.jsp" %>
		<form:form id="listForm" modelAttribute="order" action="${ctxShop}/order/toPay" method="post" class="form-horizontal">
		<input type="hidden" id="mobile" name="mobile" value="${user.mobile }"/>
		<input type="hidden" id="username" name="username" value="${user.name }"/>
		<form:hidden path="id"/>
		<form:hidden path="orderNo"/>
		<tags:mbmessage content="${message}"/>
		<!--订单信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a">
		<li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_5.png" alt="订单信息"></div>订单信息</li>
			<li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">订单编号：</label>
				    <label class="float-left" style="width: 65%;">${order.orderNo }</label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">订单时间：</label>
				    <label class="float-left" style="width: 65%;"><fmt:formatDate value="${order.createDate }" pattern="yyyy-MM-dd HH:mm:ss"/></label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">订单状态：</label>
				    <label class="float-left" style="width: 65%;">
				    <c:if test="${order.delFlag=='0' && order.payStatus=='0' && (order.payType=='2' or order.payType=='3' or order.payType=='4')}">
				           待付款
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='0' && ((order.payStatus=='0' && order.payType=='1') || (order.payStatus=='1' && order.payType!='1'))}">
				          待发货
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='1'}">
				           待收货
				    </c:if>
				    <c:if test="${order.delFlag=='0' && order.orderType=='2'}">
				           已完成
				    </c:if>
				    <c:if test="${order.delFlag=='1'}">
				           已取消
				    </c:if>
				    </label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">支付方式：</label>
				    <label class="float-left" style="width: 65%;">${order.payTypeDesc }</label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">总价：</label>
				    <label class="float-left amount" style="width: 65%;">￥${order.amount }</label>
			    </a>
		    </li>
		</ul>
		<!--商品信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="order-ui">
		<li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_8.png" alt="商品信息"></div>商品信息(共${order.totalNumber }件)</li>
		<c:if test="${fn:length(order.detailList) != 0}">
		<c:forEach items="${order.detailList}" var="detail" varStatus="vs">
			<li data-icon="false">
				<a href="#">
					<div class="product-img" style="width: 108px; height: 80px; margin-top: 5px;">
						<img id="photo${vs.index }" class="displayImages" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${detail.product.logoUrl }">
				    </div>
				    <p><label class="float-left">${detail.product.name }</label></p>
				    <p><label class="huise-color">${detail.product.startSaleNum*detail.product.productUnit.number}${detail.product.productUnit.name }起购</label></p>
				    <p><label class="float-left huise-color">单价：</label><label class="float-left amount">￥${detail.price }</label><label class="float-left unit-color"> / ${detail.product.productUnit.number}${detail.product.productUnit.name }</label></p>
				    <p><label class="float-left huise-color">数量：${detail.number }</label></p>
			    </a>
		    </li>
		</c:forEach>
		</c:if>
		</ul>
		<!--收货人信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a">
		<li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_2.png" alt="收货人信息"></div>收货人信息</li>
			<li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">收货人姓名：</label>
				    <label class="float-left" style="width: 65%;">${order.userAddress.name }</label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">收货人电话：</label>
				    <label class="float-left" style="width: 65%;">${order.userAddress.phone }</label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">收货人地址：</label>
				    <label class="float-left" style="width: 65%;">${order.userAddress.detailAddress }</label>
			    </a>
		    </li>
		    <li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 35%;">收货时间：</label>
				    <label class="float-left" style="width: 65%;">${order.timeSlot.timeText }</label>
			    </a>
		    </li>
		</ul>
		</form:form>
	</div>
	<c:if test="${order.payStatus==0 && order.payType!='1'}">
	<div data-role="footer" class="ui-footer" data-position="fixed" data-tap-toggle="false">
		<div style="text-align: center;">
			<img alt="" src="${ctxFront }/images/shop/toPay.png" height="35" style="margin: 7.5px 1em 7.5px 0px;" onclick="toPay()">
	    </div>
	</div><!-- /footer -->
	</c:if>
</body>
</html>
